<template>
	<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="showkeyboard" @change="change">
		<!-- <view class="popmask" @click="clickCancel"></view>	 -->
		<view style="width:100%;position: fixed;bottom: 0;">
			<view class="input-area">
				<view class="notes" style= "flex:1">{{editnotes}} </view>
				<!-- <view class="notes" style= "font-weight: bold;">{{editvalue}}</view> -->
									
			</view>
			<view class="buttongroup">
				<view class="col-group flexw r">					
					<view class="col-item b" @click="clickButton('减10')">减10</view>
					<view class="col-item b" @click="clickButton('加10')">加10</view>
					<view class="col-item b" @click="clickButton('全选')">全选</view>
					<view class="col-item " @click="clickButton('多选')">{{ismultiselect?'取消多选':'多选'}}</view>
				</view>
				<view class="col-group onew r">
					<view class="col-item b" @click="clickButton('1')">1</view>
					<view class="col-item b" @click="clickButton('4')">4</view>
					<view class="col-item b" @click="clickButton('7')">7</view>
					<view class="col-item " @click="clickButton('.')">.</view>
				</view>
				<view class="col-group twow r">
					<view class="rows">
						<view class="col-item onew r b" @click="clickButton('2')">2</view>
						<view class="col-item onew b" @click="clickButton('3')">3</view>
					</view>
					<view class="rows">
						<view class="col-item onew r b" @click="clickButton('5')">5</view>
						<view class="col-item onew b" @click="clickButton('6')">6</view>
					</view>
					<view class="rows">
						<view class="col-item onew r b" @click="clickButton('8')">8</view>
						<view class="col-item onew b" @click="clickButton('9')">9</view>
					</view>
					<view class="rows">
						<view class="col-item onew r b" @click="clickButton('0')">0</view>
						<view class="col-item onew b" @click="clickButton('00')">00</view>
					</view>
				</view>
				<view class="col-group twow">
					<!-- <view class="rows b">
						<view class="col-item onew r" @click="clickButton('上一项')">
							<xxicon type="arrowleft" color="#BBBBBB" size="50" />
						</view>
						<view class="col-item onew" @click="clickButton('下一项')">
							<xxicon type="arrowright" color="#BBBBBB" size="50" />
						</view>
					</view> -->
					<view class="rows" >
						<view class="col-item twow r b" @click="clickButton('清空')">归零</view>
					</view>
					<view class="rows b" @click="clickButton('退格')">
						<!-- <view class="col-item twow" @click="clickButton('退格')"> -->
							<xxicon type="arrowthinleft" color="#BBBBBB" size="70" />
						<!-- </view> -->
					</view>
					<view class="rows" >
						<!-- <view class="col-item twow r b" @click="clickButton('00')">00</view> -->
					</view>
					<view class="rows ">
						<view class="close-buttton twow" @click="clickClose">
							关闭键盘<xxicon type="arrowdown" color="#FFFFFF" size="42" style="margin-left: 2px;"/>
						</view>		
					</view>
				</view>
			</view>				
		</view>		
		<xxicon v-if="ismultiselect" class="multiselect-flag" type="checkbox-filled" color="#55aa00" size="40" />
	</uni-transition>
</template>

<script>
	var _this;
	export default {
		name: 'xxkeyboard',	
		props: {
			showkeyboard: {
				type: [Boolean, String],
				default: true
			},
			
			editnotes:{
				type: String,
				default: "",
			},
			editvalue:{
				type: String,
				default: "",
			},
			ismultiselect:{
				type: [Boolean, String],
				default: false
			}
			
			
		},
		data() {
			return {										
				modeClass: ['slide-bottom'],
				ph: '关键字快速过滤',
				transfromClass: {					
					position: 'fixed',
					'z-index': '9999',
					// height: '100%',
					bottom: 0,
					left: 0,
					right: 0,
					display: 'flex',				
				}
			};
		},
		watch: {},
		mounted() {},
		created() {	
			_this = this;
				
		},

		computed: {
			
		},

		methods: {	
			
			clickButton:function(buttonname){
				_this.$emit('onButtonClick',buttonname)
			},
			clickClose:function(){
				_this.$emit('clickClose')
			},							
			change:function(){
				_this.$emit('change')
			}
		}
	};
</script>

<style>
	.popmask {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000000;
		opacity: 0;
		transition: opacity 200ms ease-in;
	}
	
	.input-area {
		display: flex;
		font-size: 30upx;
		color: #FFFFFF;
		background: #353535;
		height: 80upx;
		width: 100%;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 1px solid #444444;
	}
	
	.notes {
		box-sizing: border-box;
		color: #ff5722;
		height: 80upx;
		padding: 0 12upx 0 12upx;
		display: flex;
		align-items: center;				
	}	
	
	.close-buttton {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20upx 0 20upx;
		color: #FFFFFF;
		background: #555555;
		height: 100upx;
	}
	
	.buttongroup {
		display: flex;
		background: #353535;
		height: 400upx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.col-group {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.rows {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100upx;
	}
	
	.col-item {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 38upx;
		height: 100upx;
	}
	
	.col-item:active {
		background: #ff5722;
	}
	
	.onew {
		width: 110upx;
	}
	
	.twow {
		width: 220upx;
	}
	
	.flexw {
		flex: 1;
	}
	
	.tworow {
		height: 200upx;
	}
	
	.r {
		border-right: 1px solid #444444;
	}
	
	.b {
		border-bottom: 1px solid #444444;
	}
	
	.multiselect-flag {
		position: fixed;
		bottom: 60upx;
		left: 0px;
		z-index: 999;
	}
	
</style>
